import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useState } from 'react';
import Switch from 'components/Switch'


export default function Index() {
  const [active, setActive] = useState(false)

  return (
    <View className={s.wrapper}>
      <View className={s.container}>
        <View className={active ? `${s.playground} ${s.active}` : s.playground}>
          <View className={active ? `${s.shadow} ${s.active}` : s.shadow}>
            <View className={s.top}></View>
            <View className={s.center}></View>
            <View className={s.left}></View>
          </View>
          <View className={active ? `${s.comtent} ${s.active}` : s.comtent}>
            <View className={`${s.header_box} ${s.box}`}>
              <View className={s.tab}>{'<Header>'}</View>
            </View>
            <View className={`${s.nav_box} ${s.box}`}>
              <View className={s.tab}>{'<Nav>'}</View>
            </View>
            <View className={`${s.main_box} ${s.box}`}>
              <View className={s.tab}>{'<Main>'}</View>
            </View>
            <View className={`${s.footer_box} ${s.box}`}>
              <View className={s.tab}>{'<Footer>'}</View>
            </View>
          </View>
        </View>
        <Switch 
          className={s.margin} 
          text='show perspective' 
          state={active} 
          onClick={() => setActive(!active)} 
        />
      </View>
     
    </View>
  )
}


{/* <View className={s.container1}>
  <View className={`${s.box1} ${s.box}`}>1</View>
  <View className={`${s.box2} ${s.box}`}>2</View>
  <View className={`${s.box3} ${s.box}`}>3</View>
  <View className={`${s.box4} ${s.box}`}>4</View>
  <View className={`${s.box5} ${s.box}`}>5</View>
  <View className={`${s.box6} ${s.box}`}>6</View>
  <View className={`${s.box7} ${s.box}`}>7</View>
  <View className={`${s.box8} ${s.box}`}>8</View>
  <View className={`${s.box9} ${s.box}`}>9</View>
</View> */}